<template>
    <a-range-picker
        v-model="dateRange"
        @change="handleDateChange"
        v-bind="$attrs"
    />
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { watchPausable } from '@vueuse/core'

const dateRange = ref<any>([])
const start = defineModel('start', { default: '', required: false })
const end = defineModel('end', { default: '', required: false })

/**
 * 如果时外部传值，则监听外部传值，并赋值给内部
 */
const { pause, resume } = watchPausable(
    [start, end],
    value => {
        dateRange.value = [value?.[0], value?.[1]]
    },
    {
        immediate: true,
        deep: true
    }
)

/**
 * 处理日期变化
 * @param data 日期数据，包含开始日期和结束日期
 */
const handleDateChange = async data => {
    pause()
    start.value = data?.[0] || undefined
    end.value = data?.[1] || undefined
    await nextTick()
    resume()
}
</script>
